<template>
  <div>
    <div class="title">
      <el-col :span="1" style="width: 50px;">
        <span style="color:#757575;">位置 :</span>
      </el-col>
      <el-col :span="20">
        <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">{{title}}</span>
        <span v-if="secondshow" :class="{'textactive' : secondshow}">> {{secondtitle}}</span>
      </el-col>
    </div>    
      <!-- table信息 -->
      <el-row type="flex" justify="center">
        <el-col :span="23">        
          <div  style="float: right;">
            <el-row type="flex" justify="space-between" style="margin-top: 11px;margin-bottom:11px" class="btn">            
              <el-input
                  size="small" 
                  style="width: 140px;margin-right: 5px;"
                  placeholder="请输入客户名称"               
                  v-model.trim="searchword"
                  @keyup.enter.native="search()"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    style="cursor: pointer;" 
                    @click="search()"                  
                  ></i>
                </el-input>
                <el-button
                  class="add"
                  @click="add"
                  size="small"                
                  round
                >新增</el-button>
                <el-button
                  class="edit"
                  @click="edit()"
                  size="small"
                  round
                >修改</el-button>
                <el-button
                  class="download"
                  @click="download()"
                  size="small"
                  round
                >下载</el-button>
                <el-button
                  class="delete"
                  size="small" 
                  @click="deleteUser()"                
                  round
                >删除</el-button>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-row>                      
            <!-- 员工信息 -->
            <el-col >
                <template>
                    <el-table :data="tableData" highlight-current-row  stripe
                    style="width: 100%;" @current-change="handleCurrentChange">              
                        <!-- <el-table-column type="index" label="序号" width=200>
                        </el-table-column> -->
                        <el-table-column prop="customerName"  label="客户名称" >
                        </el-table-column>
                        <el-table-column prop="templateName" label="简历模板名称" >
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" >
                        </el-table-column>               
                        <el-table-column label="预览" >
                            <template slot-scope="scope">             
                            <el-button type="text" style="color:#1099ff" @click="previewfile">预览文件</el-button>                  
                            </template>
                        </el-table-column>
                    </el-table> 
                </template>
              <div class="pager">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="pagehandleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5,10,15]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalcount">
              </el-pagination>               
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 新增弹框 -->
      <el-dialog title="新增用户信息" :visible.sync="addvisiable" width="30%">
        <el-form :model="addform" ref="addform" :rules="addformrules">
          <el-form-item label="请输入客户名称" prop="customerName">
            <el-input v-model.trim="addform.customerName" autocomplete="off" placeholder="请输入客户名称" ></el-input>
          </el-form-item>
          <el-form-item label="请输入简历模板名称" prop="templateName">
            <el-input v-model.trim="addform.templateName" autocomplete="off" placeholder="请输入简历模板名称"></el-input>
          </el-form-item>
          <el-form-item label="请输入文件备注" prop="remark">
            <el-input v-model.trim="addform.remark" autocomplete="off" placeholder="请输入文件备注"></el-input>
          </el-form-item>
          <el-form-item label="点击按钮选择需要上传的文件:" >
            <el-upload
              ref="upload"
              type="file"
              action
              :before-upload="beforeupload"
              :auto-upload="false"
              :file-list="fileList"
              :limit="2"
              accept=".pdf,.docx">           
              <el-button  slot="trigger" size="small">选取文件</el-button>             
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button type="primary" @click="addteam('addform')">确定添加</el-button>
          <el-button @click="handleClose">取 消</el-button>
        </span>
      </el-dialog>
    <!-- 修改弹框 -->
      <el-dialog title="修改用户信息" :visible.sync="addvisiable1" width="30%">
        <el-form :model="editform" ref="editform" :rules="editformrules">
          <el-form-item label="请输入客户名称" prop="customerName">
            <el-input v-model.trim="editform.customerName" autocomplete="off" placeholder="请输入客户名称" ></el-input>
          </el-form-item>
          <el-form-item label="请输入简历模板名称" prop="templateName">
            <el-input v-model.trim="editform.templateName" autocomplete="off" placeholder="请输入简历模板名称"></el-input>
          </el-form-item>
          <el-form-item label="请输入文件备注" prop="remark">
            <el-input v-model.trim="editform.remark" autocomplete="off" placeholder="请输入文件备注"></el-input>
          </el-form-item>
          <el-form-item label="点击按钮选择需要上传的文件:" >
            <el-upload
              ref="upload"
              type="file"
              action
              :before-upload="beforeupload"
              :auto-upload="false"
              :file-list="fileList"
              :limit="2"
              accept=".pdf,.docx">           
              <el-button  slot="trigger" size="small">选取文件</el-button>             
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button type="primary" @click="editeam('editform')">确定添加</el-button>
          <el-button @click="handleClose1">取 消</el-button>
        </span>
      </el-dialog>

    
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "modelmanage",
  data(){
      return{
        secondtitle: "",
        title: "客户简历",
        secondshow: false,
        tableData:[],
        searchword:"",
        currentPage: 1,
        pagesize: 15,
        addvisiable:false,
        addvisiable1:false,
        totalcount: null,
        fileList: [],
        param: new FormData(),
        addform:{
            customerName: '',
            templateName:'',
            remark:''
        },
        editform:{
            id:'',
            customerName: '',
            templateName:'',
            remark:''
        },
        // 新增用户规则
        addformrules: {
        customerName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
        templateName:[{ required: true, message: "请输入简历模板名称", trigger: "blur" }],
        remark:[{ required: true, message: "请输入备注", trigger: "blur" }],
      },
      // 修改用户规则
        editformrules: {
        customerName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
        templateName:[{ required: true, message: "请输入简历模板名称", trigger: "blur" }],
        remark:[{ required: true, message: "请输入备注", trigger: "blur" }],
      },
      }
  },
  created() {
    this.success();
  },
  methods:{   
    tableshow(row) {
      this.addShow = false;
      this.secondshow = false;
      this.show = false;
      if (this.$refs.userAdd) {
        this.$refs.userAdd.initdata();
      }
      if (this.$refs.custEdit) {
        this.$refs.custEdit.initdata();
      }
      this.type = null;
      this.$nextTick(() => {
        this.$refs.singleTable.setCurrentRow(row);
      });
    },
    // 加载页面时请求数据
    success(){
        axios.post(this.url + "/template/selectTemplateAll",
        {
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
        .then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.totalcount = res.data.data.total;
          // console.log(res.data.data);
          // alert(this.data);
        }
      });
    },
     handleSizeChange(val) {
      this.pagesize = val;
      this.success();
    },
    pagehandleCurrentChange(val) {
      this.currentPage = val;
      this.success();
    },
    //elementUI的表格事件,获取当前表格行的数据
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 搜索功能
    search() {
      this.currentPage = 1;
      axios
        .post(
          this.url + "/template/selectTemplateLikeAll",
          {
            condition: this.searchword,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          }
        )
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {           
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;                      
          }
        });
    },
    // 新增
    add(){
        this.addvisiable = true;
        document.documentElement.style.overflow = "hidden";  
        this.fileList=[];     
    },
    // 修改
    edit(){       
        if(this.currentRow == null){
            this.addvisiable = false;
            document.documentElement.style.overflow = "auto";
            this.$message.error("未选择任意一行！");
        }
        else{

          this.fileList = [];
          this.addvisiable1 = true;
          document.documentElement.style.overflow = "hidden";
          // console.log(this.currentRow)
          this.editform = {...this.currentRow};
          // console.log(this.currentRow.fileName);
          let obj = {
            "name":this.currentRow.fileName
          }
          this.fileList.push(obj);

        }
    },
    // 关闭弹框
    handleClose() {
      this.addvisiable = false;
      document.documentElement.style.overflow = "auto";
      this.$refs.addform.resetFields();
    },
    handleClose1() {
      this.addvisiable1 = false;
      document.documentElement.style.overflow = "auto";
      this.$refs.editform.resetFields();
    },
    // 上传文件
    beforeupload(file) {
      // console.log(file);
      var de = "";
      // this.fileData.push(file);
      this.param.append("file", file);
      // console.log("beforeupload");
      //  alert(this.uploadtime);
      return false;
    },
    // 确定添加数据
    addteam(addform) {
      this.$refs.upload.submit();
      this.param.append("customerName", this.addform.customerName);
      this.param.append("templateName", this.addform.templateName);
      this.param.append("remark", this.addform.remark);
      let config = {
        headers: {
          // multipart/form-data   application/form-data
          "content-type": "application/form-data"
        }
      };
       
      this.$refs[addform].validate(valid => { 
        if (valid) {
          axios
            .post(this.url + "/template/saveFile", 
              this.param, config
            )
            .then(res => {
              if (res.data.code == 200) {
            this.$message.success("上传成功");
            this.handleClose();
            this.success();
           
          } else if (res.data.code == -550) {
            this.$message.error("上传失败");
          }
          this.param = new FormData();
             
            });
        }
      });
    },
  // 确定修改数据
    editeam(editform) {
      this.$refs.upload.submit();
      this.param.append("id", this.editform.id);
      this.param.append("customerName", this.editform.customerName);
      this.param.append("templateName", this.editform.templateName);
      this.param.append("remark", this.editform.remark);
      let config = {
        headers: {
          // multipart/form-data   application/form-data
          "content-type": "application/form-data"
        }
      };
       this.fileList=[];
      this.$refs[editform].validate(valid => { 
        if (valid) {
          axios
            .post(this.url + "/template/updateFile", 
              this.param, config
            )
            .then(res => {
              if (res.data.code == 200) {
            this.$message.success("上传成功");
            this.handleClose1();
            this.success();
           
          } else if (res.data.code == -550) {
            this.$message.error("上传失败");
          }
          this.param = new FormData();
             
            });
        }
      });
    },
    // 下载数据
    download(){
        if(this.currentRow == null){           
            this.$message.error("未选择任意一行！");
        }
        else{
          // 获取id下载文件
          // 直接下载文件 window.location.href = this.url + "/template/getFile"; 
          window.location.href = this.url + "/template/getFile?id="+this.currentRow.id;   

        }
    },
    // 删除数据
    deleteUser(){
      if(this.currentRow == null){
            this.addvisiable = false;
            document.documentElement.style.overflow = "auto";
            this.$message.error("未选择任意一行！");
        }
        else{
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {      
        axios
          .post(this.url + "/template/deleteFileData", {
            id:this.currentRow.id
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
              type: "success",
              message: "删除成功！"
            });
              this.success();
            }
            else if(res.data.code == -200){
              this.$message({
              type: "info",
              message: "删除失败！"
            });
            this.addvisiable = false;
            document.documentElement.style.overflow = "auto";
            }
            })         
          .catch(res=> {           
              this.$message({
              type: "info",
              message: "已取消删除"
            });
           
          });
      });
    }
  },
  // 预览文件
  previewfile(a){
      
      // console.log(a);
         //测试是使用替换，不是测试，不用替换
       //var filepath = a.replace("http://192.168.113.76:8888","http://v184y48057.iask.in");
      //  console.log(this.currentRow);
       var url ="http://58.221.144.130:8808/onlinePreview?url=" + encodeURIComponent("http://"+this.currentRow.fileServerIp+"/"+this.currentRow.fileGroup +"/"+ this.currentRow.fileAddress);
            var winHeight = window.document.documentElement.clientHeight-10;
            window.open(url);
       
  },

  }


};
</script>
<style scoped>
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.textactive {
  color: #1099ff;
}
.team{
  min-height: 700px;
  width: 80%;
  margin: 0 auto;
  background-color: #fff;
}
.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  margin-bottom: 10px;
}
.el-pagination {
  margin-left: 50%;
  transform: translateX(-50%);
}

.active {
  background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
}

.active1 {
  background: linear-gradient(to bottom, #1cf1e3 0%, #379b94 100%);
}

.active2 {
  background: linear-gradient(to bottom, #5a7cae 0%, #4e87dc 100%);
}
.add {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
}
.add:hover {
  color: #fff !important;
}
.edit {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
}
.edit:hover {
  color: #fff !important;
}
.delete {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #2f61ac 0%, #314159 100%);
}
.delete:hover {
  color: #fff !important;
}
.download{
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: #a2a503;
}
</style>